﻿<!DOCTYPE HTML>
<html>
<head>
    <script id="allmobilize" charset="utf-8" src="js/allmobilize.min.js"></script>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="alternate" media="handheld"/>
    <!-- end 云适配 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>注册-QQ音乐</title>
    <meta property="qc:admins" content="23635710066417756375"/>
    <meta content="QQ音乐是隶属于腾讯音乐娱乐集团的音乐流媒体平台。自2005年创立，QQ音乐注册用户总量已达8亿。" name="description">
    <meta content="QQ音乐以优质内容为核心，以大数据与互联网技术为推动力 [1]  ，致力于打造“智慧声态”的“立体”泛音乐生态圈 [3]  ，为用户提供多元化的音乐生活体验。"
          name="keywords">

    <meta name="baidu-site-verification" content="QIQ6KC1oZ6"/>

    <!-- <div class="web_root"  style="display:none">h</div> -->
    <script type="text/javascript">
        var ctx = "h";
        console.log(1);
    </script>
    <link rel="Shortcut Icon" href="h/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/xiugai.css"/>
    <script src="js/jquery.1.10.1.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="js/jquery.lib.min.js"></script>
    <script type="text/javascript" src="js/core.min.js"></script>


    <script type="text/javascript">
        var youdao_conv_id = 271546;
    </script>
    <script type="text/javascript" src="js/conv.js"></script>
</head>

<body id="login_bg">
<div class="login_wrapper">
    <div class="login_header">
        <img src="images/logo_tubiao.jpeg" width="200" height="200" alt="QQ音乐"/>
        <div id="a"><img src="images/logo_lan.jpeg" width="120" height="120" alt="cloud"/></div>
        <!--<div id="b"><img src="images/logo_music.jpg" width="90" height="90" alt="cloud"/></div>-->
    </div>

    <input type="hidden" id="resubmitToken" value="9b207beb1e014a93bc852b7ba450db27"/>
    <div class="login_box">
        <form id="loginForm">
            <!--<ul class="register_radio clearfix">
                <li>
                    找工作
                    <input type="radio" value="1" name="type"/>
                </li>
                <li>
                    招人
                    <input type="radio" value="2" name="type"/>
                </li>
            </ul>-->
            <label for="email">账号: <input type="text" id="email" name="email" tabindex="1" placeholder="请输入常用手机号"/></label>
            <span class="error" style="display:none;" id="beError"></span>
                <label for="password">密码: <input type="password" id="password" name="password" tabindex="2" placeholder="请输入密码"/></label>
            <label class="fl registerJianJu" for="checkbox">
                <input type="checkbox" id="checkbox" name="checkbox" checked class="checkbox valid"/>我已阅读并同意<a
                    href="h/privacy.html" target="_blank">《QQ音乐用户协议》</a>
            </label>
            <input type="submit" id="submitLogin" value="注 &nbsp; &nbsp; 册"/>

            <input type="hidden" id="callback" name="callback" value=""/>
            <input type="hidden" id="authType" name="authType" value=""/>
            <input type="hidden" id="signature" name="signature" value=""/>
            <input type="hidden" id="timestamp" name="timestamp" value=""/>
        </form>
        <div class="login_right">
            <div>已有QQ音乐帐号</div>
            <a href="user-login.html" class="registor_now">直接登录</a>
            <div class="login_others"></div>
           <!-- <a href="h/ologin/auth/sina.html" target="_blank" class="icon_wb" title="使用新浪微博帐号登录"></a>
            <a href="h/ologin/auth/qq.html" class="icon_qq" target="_blank" title="使用腾讯QQ帐号登录"></a>-->
        </div>
    </div>
    <div class="login_box_btm"></div>
</div>
<!--引入加密插件-->
<script type="text/javascript" src="js/jquery-md5.js"></script>
<script type="text/javascript">

    $(document).ready(function (e) {
        $('.register_radio li input').click(function (e) {
            $(this).parent('li').addClass('current').append('<em></em>').siblings().removeClass('current').find('em').remove();
        });

        $('#email').focus(function () {
            $('#beError').hide();
        });
        //添加自定义校验
        //手机号格式验证
		jQuery.validator.addMethod("isPhoneNumber",function (value,element) {
			//正则表达式
			var tel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
			return tel.test(value);
		},"请正确填写您的手机号");

		//手机号是否可用验证
		jQuery.validator.addMethod("validatePhoneNumber",function (value,element) {
			//手机号不可用
			let flag = false;
			//发动http xhr 异步请求服务器查手机号
			$.ajax({
				async:false,//设置同步
				type:"get",
				url:"/user/Phone",
				data:{
                    userPhone:value
				},
				dataType:"json"
			}).done((result)=>{
				flag = !result.data;//result.data=true表示手机在数据库中存在，被占用
			}).fail(()=>{
				alert("validatePhoneNumber request fail");
			});
			return flag;
		},"手机号被占用");
		//验证表单
        $("#loginForm").validate({
            rules: {
                type: {
                    required: true
                },
                email: {
                    required: true,
					isPhoneNumber:true,    			//自定义验证规则名，检查手机号是否合法
					validatePhoneNumber: true,		//自定义验证规则名，检查手机号是否被占用
                },
                password: {
                    required: true,
                    rangelength: [6, 16]
                },
                checkbox: {required: true}
            },
            messages: {
                type: {
                    required: "请选择使用拉勾的目的"
                },
                email: {
                    required: "请输入常用手机号"
                },
                password: {
                    required: "请输入密码",
                    rangelength: "请输入6-16位密码，字母区分大小写"
                },
                checkbox: {
                    required: "请接受拉勾用户协议"
                }
            },
            errorPlacement: function (label, element) {/*
			    		if(element.attr("type") == "radio"){
			    			label.insertAfter($(element).parents('ul')).css('marginTop','-20px');
			    		}else if(element.attr("type") == "checkbox"){
			    			label.inserresult.contenttAfter($(element).parent()).css('clear','left');
			    		}else{
			    			label.insertAfter(element);
			    		} */
                /*modify nancy*/
                if (element.attr("type") == "radio") {
                    label.insertAfter($(element).parents('ul')).css('marginTop', '-20px');
                } else if (element.attr("type") == "checkbox") {
                    label.insertAfter($(element).parent()).css('clear', 'left');
                } else {
                    label.insertAfter(element);
                }
                ;
            },
            submitHandler: function (form) {
                var type = $('input[type="radio"]:checked', form).val();
                var email = $('#email').val();
                var password = $('#password').val();

                $(form).find(":submit").attr("disabled", true);

                $.ajax({
                    type: 'POST',
                    data: {
                        userPhone: email,
                        userPassword: $.md5(password),//使用jquery-md5.js
                    },
                    url:'/user/reg',
                    dataType: 'json'
                }).done(function (result) {
                    if (result.data) {
                    	//注册成功
						alert("注册成功");
						/*前往登录页*/
                        location.href="user-login.html";
                    } else {
						//注册失败
						alert("注册失败");
                    }
                    $(form).find(":submit").attr("disabled", false);
                }).fail(()=>{
                	alert("register request fail");
				})
            }
        });
    });
</script>
</body>
</html>
